<template>
    <div class="form">
        <icon-close class="close" @click="$router.push('/')" />
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="15%" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="昵称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="3-16个字符" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="ruleForm.gender">
                    <el-radio label="男" value="1" />
                    <el-radio label="女" value="0" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
                <el-date-picker v-model="ruleForm.birthday" type="date" label="出生日期" placeholder="选择你的出生日期"
                    style="width: 61%" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入你的真实邮箱" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off"
                    placeholder="长度在6-16位,建议使用至少两种字符" show-password />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">确认注册</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置信息</el-button>
            </el-form-item>
            <div class="tips">
                <span @click="$router.push('/login')">已有账号？前往登录-></span>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    gender: '',
    birthday: '',
    email: '',
    password: '',
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '昵称不能为空', trigger: 'blur' },
        { min: 3, max: 16, message: '长度应该在3-16个字符', trigger: 'blur' },
    ],
    gender: [
        {
            required: true,
            message: '请选择性别',
            trigger: 'change',
        },
    ],
    birthday: [
        {
            type: 'date',
            required: true,
            message: '请填写正确的日期格式',
            trigger: 'change',
        },
    ],
    email: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { type: 'email', message: '邮箱不存在', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 16, message: '长度应该在6-16个字符', trigger: 'blur' },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>

<style lang="scss" scoped>
.form {
    position: fixed;
    left: 25%;
    right: 35%;
    top: 10%;

    .close {
        float: right;
        padding: 0.05rem;
    }

    form {
        padding: 0.2rem;
        border-radius: 0.1rem;
        background-color: rgb(246, 246, 246);

        .tips {
            color: green;
            float: right;
            font-size: 0.05rem;
        }
    }

}



span {
    cursor: pointer;
}
</style>